<template>
  <div>
    <el-dialog v-model="dialogVisible" title="Create Pay Link" width="90%" :before-close="handleClose">

      <div>
        <div v-for="item in goodsCardData" :key="item.id" class="margin-bottom goods_item padding-bottom-xs">
          <div class="flex">
            <div>
              <el-image style="width: 60px; height: 60px" :src="item.goodsDataOne.head_img[0]" :fit="fit" />
            </div>

            <div class="margin-left-xs w-100">
              <div class="flex justify-between align-center">
                <div style="font-weight: 600; max-width: 200px;" class="one_text_hidden">{{ item.goods_name }}
                </div>

                <el-icon color="red" @click="deleteGoodsRequest(item)">
                  <DeleteFilled />
                </el-icon>
              </div>

              <div>{{ item.goods_type_name }}</div>

              <div>原价: <span style="color: red;">${{ item.one_money }}</span></div>


              <div class="flex justify-between">
                <!-- <div class="flex justify-end align-center margin-top-xs"> -->
                <div>
                  <div>设置价格:</div>

                  <el-input-number size="small" v-model="item.order_money" :min="0.01" />
                </div>

                <!-- <div class="flex justify-end align-center margin-top-xs"> -->
                <div>
                  <div>数量:</div>

                  <el-input-number size="small" v-model="item.order_number" :min="1" step-strictly />
                </div>
              </div>

            </div>
          </div>
        </div>

        <el-input v-model="uname" placeholder="请输入uname"></el-input>

        <Select placeholder="请选择地址" v-model="addressId" size="default" class="margin-top-xs" mode="api" isNoSetWidth
          apiUrl="/api/getUserAddress" label-key="address" value-key="id" />
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>

          <el-button type="primary" @click="handleCreateLink">
            Create Link
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { nextTick, ref } from 'vue';
import { getCartListApi, setCartDelApi, setUserPlaceOrderApi } from '@/api/index'
import { ElMessage } from 'element-plus';
import Select from '@/components/admin/Select.vue'

const dialogVisible = ref(false)

const deleteGoodsRequest = async (record) => {
  try {
    const res = await setCartDelApi({ id: record.id })

    goodsCardData.value = goodsCardData.value.filter(item => item.id != record.id)
  } catch (error) {
    ElMessage({
      type: 'error',
      message: error.msg
    })
  }
}

const open = () => {
  dialogVisible.value = true

  getGoodsCarDataRequest()

}

const close = () => {
  dialogVisible.value = false
}

const uname = ref('')

const addressId = ref('')

const handleCreateLink = () => {
  nextTick(async () => {
    try {
      let dataList = goodsCardData.value.map(item => {
        return {
          orderMoney: item.order_money,
          goodsId: item.goods_id,
          moneyId: item.money_id,
          number: item.order_number,
          shopId: item.shop_id,
          uname: uname.value,
          addIdId: addressId.value,
        }
      })

      let params = {
        message: JSON.stringify(dataList)
      }

      const res = await setUserPlaceOrderApi(params)

      emit('confirm', res)

      close()
    } catch (error) {
      ElMessage({
        type: 'error',
        message: error.msg
      })
    }
  })
}

const handleChange = (e, record) => {
  if (record.order_number == 0) {
    deleteGoodsRequest(record)
  }
}

const emit = defineEmits(['confirm'])

defineExpose({
  open
})

const goodsCardData = ref([])

const getGoodsCarDataRequest = async () => {
  try {
    const res = await getCartListApi({})

    goodsCardData.value = res.data
  } catch (error) {
    ElMessage({
      type: 'error',
      message: error.msg
    })
  }
}

</script>

<style lang='scss' scoped>
.goods_item {
  border-bottom: 1px solid #eee;
}
</style>
